<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm" :levelList='levelList' />
    <el-button class="mgtop" type="primary" @click="openDialog(null,'account')" v-if="roleCheck('blacklist-add')">添加</el-button>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." >
      <el-table-column label="类型"  prop="blackType" align="center" >
        <template slot-scope="{row}">
           {{row.blackType | switchType}}
        </template>
      </el-table-column>
      <el-table-column label="值"  prop="blackTitle" align="center" >
        <template slot-scope="{row}">
          <span @click="row.blackType==0?gotoDetail(row):null" :class="{'color-blue':row.blackType==0}">{{row.blackTitle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="黑名单等级" prop="levelName" align="center" >
         <template slot-scope="{row}">
           {{row.levelName}}
        </template>
      </el-table-column>
      <el-table-column label="添加人" prop="creator" align="center">
      </el-table-column>
      <el-table-column label="添加时间"  prop="createTime" align="center" >
        <template slot-scope="{row}">
         {{row.createTime | toTime('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="最后调整人"  prop="lastUpdater" align="center"  >
      </el-table-column>
      <el-table-column label="最后调整时间"  prop="lastUpdateTime" align="center" >
         <template slot-scope="{row}">
         {{row.lastUpdateTime | toTime('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="备注"  prop="remark" align="center" >
      </el-table-column>
       <el-table-column label="操作"  align="center" width="120" fixed="right" >
         <template slot-scope="{row}">
          <el-button type="text"  @click="openDialog(row,'leval')" v-if="roleCheck('blacklist-adjust-level')">调整群组</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
    <AccountDialog
      :dialogVisible="accountDialogVisible"
      :levelList='levelList'
      v-if="accountDialogVisible"
      :row-data="dialogData"
      @cancel="accountDialogVisible = false"
    />
    <LevalDialog
      :dialogVisible="levalDialogVisible"
      :levelList='levelList'
      v-if="levalDialogVisible"
      :row-data="dialogData"
      @cancel="levalDialogVisible = false"
    />
  </div>
</template>
<script>
import FormFilter from './accountFilter.vue';
import AccountDialog from './dialog/addAccount.vue';
import LevalDialog from './dialog/levelDialog.vue';
import { grid, factory } from '@/build';
import { getBlackList, risBlackListBehaviorLevelApi } from '@/services/api/risk';

export default {
  name: 'black-account',
  mixins: [grid, factory],
  components: {
    FormFilter,
    AccountDialog,
    LevalDialog,

  },

  data() {
    return {
      accountDialogVisible: false, // 是否显示添加账号弹框
      levalDialogVisible: false, // 是否显示调整等级弹框
      dialogData: {},
      tableData: {
        list: [],
        total: 0,
      },
      // levelList: this.$store.state.risk.levelList, // 黑名单群组
      filters: {
        page: 1,
        size: 20,
        blackType: '', // 类型
        blackTitle: '', // 值
        level: [], // 群组，可多选
        creator: '', // 添加人
        lastUpdater: '', // 最后调整人
        dataType: 0,
        startDate: moment().format('YYYY-MM-DD 00:00:00'),
        endDate: moment().format('YYYY-MM-DD 23:59:59'),
      },
    };
  },
  filters: {
    switchType(blackType) {
      return _.find(consts.BLACK_LIST_TYPE, { value: blackType.toString() }).label;
      // let type = '';
      // switch (blackType) {
      //   case 0:
      //     type = '账号';
      //     break;
      //   case 1:
      //     type = 'IP';
      //     break;
      //   case 2:
      //     type = '设备号';
      //     break;
      //   case 3:
      //     type = '银行卡';
      //     break;
      //   case 4:
      //     type = '手机号';
      //   case 5:
      //     type = '姓名';
      //     break;
      //   default:
      //     break;
      // }
      // return type;
    },
  },
  computed: {
    ...mapState({
      lastTagNo: state => state.tagsView.lastTagNo,
      levelList: state => state.risk.levelList,
    }),

  },
  methods: {
    gotoDetail(member) {
      let name = '';
      if (member.userType == 0) {
        name = 'member-list';
      } else if (member.userType == 1) {
        name = 'agency-list';
      }
      this.$router.push({
        name,
        query: {
          add: true,
          tagNo: this.lastTagNo + 1,
        },
        params: {
          member,
        },
      });
    },
    submitFilterForm(formInline) {
      const { time } = formInline;
      if (!_.isUndefined(time) && _.isArray(time)) {
        [this.filters.startDate, this.filters.endDate] = time;
        // formInline = { ...formInline, msg_start_time, msg_end_time };
      } else {
        this.filters.startDate = undefined;
        this.filters.endDate = undefined;
      }

      this.filters = { ...this.filters, ...formInline };
      this.filters.level = this.filters.level.join(',');
      this.doGet({ action: 'getGrid' });
    },
    openDialog(row, dialogType) {
      if (dialogType === 'account') {
        this.accountDialogVisible = true;
      } else {
        this.levalDialogVisible = true;
      }
      window.scrollTo(0, 0);
      this.dialogData = row;
    },
  },

  mounted() {
    // this.bindGet(risBlackListBehaviorLevelApi, 'levelList', {// 群组列表
    //   action: 'getLevalList',
    //   format: (data) => {
    //     this.levelList = data;
    //     this.filters.level = [];
    //     this.levelList.forEach((item) => {
    //       this.filters.level.push(item.levelId);
    //     });
    //     this.filters.level = this.filters.level.join(',');
    //     this.doGet({ action: 'getGrid' });
    //     return data;
    //   },

    // });
    this.bindGet(getBlackList, 'tableData', {// 黑名单列表
      action: 'getGrid',
      sendingData: 'filters',
    });

    this.filters.level = [];
    this.levelList.forEach((item) => {
      this.filters.level.push(item.levelId);
    });
    this.filters.level = this.filters.level.join(',');
    this.doGet({ action: 'getGrid' });


    // this.getAll();


  },
};
</script>
<style lang="scss" scoped>
.mgtop{margin-top:30px}
.color-blue{color:#409eff;cursor: pointer;}
.color-blue:hover{text-decoration: underline}
</style>
